<template>
   <view class="swiper" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"><slot></slot></view>
</template>

<script>
export default {
   name: 'MySwiper',
   data() {
      return {
         startX: 0,
         startY: 0,
         diffX: 0,
         diffY: 0,
         isMoving: false,
         direction: '' // 记录滑动方向
      };
   },
   methods: {
      // 手指触摸屏幕开始事件处理函数
      onTouchStart(event) {
         // 记录初始触点的 X、Y 坐标
         this.startX = event.touches[0].pageX;
         this.startY = event.touches[0].pageY;
         // 将移动状态置为 true
         this.isMoving = true;
      },
      // 手指在屏幕上滑动事件处理函数
      onTouchMove(event) {
         if (!this.isMoving) return;
         // 获取当前触点的位置，并计算 X、Y 方向上的偏移量
         const { pageX, pageY } = event.touches[0];
         this.diffX = pageX - this.startX;
         this.diffY = pageY - this.startY;
         // 获取 X、Y 方向上的偏移量的绝对值
         const absDiffX = Math.abs(this.diffX);
         const absDiffY = Math.abs(this.diffY);
         // 判断手势方向
         if (absDiffX > absDiffY && absDiffX > 10) {
            // 如果是水平滑动事件
            this.direction = this.diffX > 0 ? 'right' : 'left';
         } else if (absDiffY > absDiffX && absDiffY > 10) {
            // 如果是垂直滑动事件
            this.direction = this.diffY > 0 ? 'bottom' : 'top';
         }
      },
      // 手指离开屏幕事件处理函数
      onTouchEnd(event) {
         if (!this.isMoving) return;
         // 根据手势方向触发对应事件
         if (this.direction === 'left') {
            this.$emit('swiperleft');
         } else if (this.direction === 'right') {
            this.$emit('swiperright');
         }
         // 将移动状态重置为 false
         this.isMoving = false;
         // 将手势方向重置为空字符串
         this.direction = '';
      }
   }
};
</script>
